import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {BooleanInput} from './BooleanInput.tsx';
import {Link} from '../../Link/Link';
import {useArgs, updateArgs} from '@storybook/client-api';

<Meta
  title="Components/Inputs/Boolean input"
  component={BooleanInput}
  argTypes={{
    value: {
      control: {type: 'select'}, options: [true, false, null],
      description: 'Value of the input. Can be null if the input is clearable.',
      table: {
        defaultValue: {summary: 'null'},
      },
    },
    readOnly: {
      control: {type: 'boolean'},
      description: 'Displays the value of the input, but does not allow changes.',
    },
    clearable: {
      control: {type: 'boolean'},
      description: 'Allows the user to manage a null value, and adds a button to clear the input.',
    },
    onChange: {
      description: 'The handler called when clicking on Checkbox.',
    },
    yesLabel: {
      description: 'The label for the Yes button',
    },
    noLabel: {
      description: 'The label for the No button',
    },
    clearLabel: {
      description: 'The label for the Clear value button',
    },
    size: {
      description: 'The size of the buttons',
      table: {
        defaultValue: {summary: 'normal'},
      },
      control: {type: 'select'}, options: ['normal', 'small'],
    },
  }}
  args={{
    value: null,
    yesLabel: 'Yes',
    noLabel: 'No',
    clearLabel: 'Clear value',
  }}
/>

# Boolean input

## Usage

The BooleanInput is used to quickly switch between two possible states. It is commonly used for "yes/no" switches.
The input can in some cases have a 3rd state, EMPTY. In this case, a clear button allows the user to empty the value of the field.

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      const [{value}, updateArgs] = useArgs();
      const setValue = newValue => {
        updateArgs({value: newValue});
      };
      return <BooleanInput {...args} value={value} onChange={setValue} />;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on value

<Canvas>
  <Story name="Value">
    {args => {
      return (
        <>
          <BooleanInput {...args} />
          <BooleanInput {...args} value={true} clearable={true} />
          <BooleanInput {...args} value={false} clearable={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on readOnly

<Canvas>
  <Story name="Readonly">
    {args => {
      return (
        <>
          <BooleanInput {...args} value={null} readOnly={true} />
          <BooleanInput {...args} value={true} readOnly={true} />
          <BooleanInput {...args} value={false} readOnly={true} />
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on invalid

<Canvas>
  <Story name="Invalid">
    {args => {
      return (
        <>
          <BooleanInput {...args} value={null} invalid={true}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
          <BooleanInput {...args} value={true} invalid={true}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
          <BooleanInput {...args} value={false} invalid={true}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
        </>
      );
    }}
  </Story>
</Canvas>

## Variation on size

<Canvas>
  <Story name="Small">
    {args => {
      return (
        <>
          <BooleanInput {...args} value={null} size={'small'}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
          <BooleanInput {...args} value={true} size={'small'}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
          <BooleanInput {...args} value={false} size={'small'}>
            There is an error. <Link href="#">Link</Link>
          </BooleanInput>
        </>
      );
    }}
  </Story>
</Canvas>
